<template>
  <div class="app-container">
    <div class="filter-container" style="padding:25px 0px">
      <div class="formBox">
        <div class="titles">{{ $t('route.defectReporting') }}</div>
        <el-form ref="ruleForm" :rules="rules" :model="listQuery" label-width="150px" style="margin-top:100px;margin-left: 200px;">
          <el-form-item :label="$t('tracibility.productId')" prop="productId">
            <el-input v-model="listQuery.productId" style="width:500px" :placeholder="$t('tracibility.productId')" clearable />
          </el-form-item>
          <el-form-item
            :label="$t('equipment.processNumber')"
            prop="processNumber"
          >
            <el-select
              v-model="listQuery.processNumber"
              :placeholder="$t('equipment.processNumber')"
              clearable
              style="width:500px"
              @change="handleFilterProcess"
            >
              <el-option
                v-for="process in processOptions"
                :key="process.processNumber"
                :label="process.processName+'_'+process.processNumber"
                :value="process.processNumber"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('rework.defectCode')"
            prop="defectCode"
          >
            <el-select
              v-model="listQuery.defectCode"
              :placeholder="$t('rework.defectCode')"
              clearable
              style="width: 500px"
              @change="handleFilterDefectCode"
            >
              <el-option
                v-for="defectCode in defectCodeOptions"
                :key="defectCode.defectCode"
                :label="defectCode.defectCode"
                :value="defectCode.defectCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('rework.subDefectCode')"
            prop="subDefectCode"
          >
            <el-select
              v-model="listQuery.subDefectCode"
              :placeholder="$t('rework.subDefectCode')"
              clearable
              style="width: 500px"
            >
              <el-option
                v-for="subDefectCode in subDefectCodeOptions"
                :key="subDefectCode.subDefectCode"
                :label="subDefectCode.subDefectCode"
                :value="subDefectCode.subDefectCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-waves style="margin-left: 350px;" type="primary" icon="el-icon-upload" @click="upload('ruleForm')">
              {{ $t('common.uploadDefect') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getProcessList } from '@/api/equipment'
import waves from '@/directive/waves' // waves directive
import { uploadDefect, getFailList, getSubFailList } from '@/api/rework'
import i18n from '@/lang'

export default {
  name: 'DefectReporting',
  directives: { waves },
  data() {
    return {
      processOptions: [],
      defectCodeOptions: [],
      subDefectCodeOptions: [],
      listQuery: {
        page: 1,
        limit: 20,
        state: 0,
        lineName: '',
        lineNumber: '',
        processNumber: '',
        defectCode: '',
        productId: '',
        subDefectCode: ''
      },
      rules: {
        processNumber: [{ required: true, message: i18n.t('msg.CAN_NOT_BE_NULL'), trigger: 'change' }],
        productId: [{ required: true, message: i18n.t('msg.CAN_NOT_BE_NULL'), trigger: 'change' }],
        defectCode: [{ required: true, message: i18n.t('msg.CAN_NOT_BE_NULL'), trigger: 'change' }]
      }
    }
  },
  created() {
    this.listQuery.lineNumber = this.$store.getters.lineNumber
    this.getProcessOptions()
  },
  methods: {
    // 获取工艺流程选项
    getProcessOptions() {
      getProcessList(this.listQuery).then(response => {
        this.processOptions = response.data.processes
      })
    },
    // 依据工艺号获取主不合格
    handleFilterProcess() {
      this.listQuery.defectCode = ''
      this.listQuery.subDefectCode = ''
      if (this.listQuery.processNumber) {
        getFailList(this.listQuery).then(res => {
          this.defectCodeOptions = res.data.fails
        })
      } else {
        this.defectCodeOptions = []
        this.subDefectCodeOptions = []
      }
    },
    // 依据主不合格号获取子不合格号
    handleFilterDefectCode() {
      this.listQuery.subDefectCode = ''
      if (this.listQuery.defectCode) {
        getSubFailList(this.listQuery).then(res => {
          this.subDefectCodeOptions = res.data.subdef
        })
      } else {
        this.subDefectCodeOptions = []
      }
    },
    // 点击上传
    upload(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm(i18n.t('produce.uploadOrNot'), i18n.t('common.tip'), {
            confirmButtonText: i18n.t('common.confirm'),
            cancelButtonText: i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            uploadDefect(this.listQuery).then(res => {
              this.$message({
                type: 'success',
                message: i18n.t('msg.UPLOAD_SUCCESS')
              })
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.titles {
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  background-color: #F5F7FA;
  color:#909399;
  border-bottom: 1px solid #DDDBDB;
}

.formBox {
  border: 1px solid #ccc;
  min-height: 70vh;
  box-shadow: 0px 0px 5px #808080;
}

.app-container {
  padding: 32px;
  bottom: 20px;
  background-color: white;
  position: relative;

  .table-container {
    width: 100%;
    top: 10px;
    bottom: 20px;
    position: relative;

    .components-container-board {
      width: 75%;
      float: left;
    }

    .select-board {
      width: 20%;
      height: 100%;
      font-size: 16px;
      align-content: center;
      float: right;
    }
  }

  .list-complete-item {
    cursor: pointer;
    position: relative;
    font-size: 14px;
    padding: 5px 12px;
    margin-top: 4px;
    border: 1px solid #bfcbd9;
    transition: all 1s;
  }

  .list-complete-item-handle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

